<template>
  <div class="start">
   
<CinemaDetailHead  />
 

 <CinemaDetailCinemaname :cinemaList="mvdetail"></CinemaDetailCinemaname>
 <CinemaDetailMovielist :movieList="mvlist"/>
 <CinemaDetailMovietime :locationTime="mvlist" ></CinemaDetailMovietime>
   <van-divider>影院一角</van-divider>
 <img class="three" style="width:100%;display:block;" :src="`${mvdetail.headImg}`" alt="">

   


  </div>
</template>
<script>
import { mapState } from "vuex";
import CinemaDetailHead from './pages/Head';
import CinemaDetailMovietime from './pages/Movietime';
	import CinemaDetailMovielist from './pages/Movielist';
  	import CinemaDetailCinemaname from './pages/Cinemaname';


import {
  GETMVAPI,
  GETMVLISTAPI,
  GETMVDLISTAPI,
  GETMVSEATLISTAPI,
  GETMVSHOWLISTAPI,
} from "@/api/api.js";
export default {
  name: "MV",
  props: {
    id: [String, Number],
  },

  data() {
    return {
  
      mid: this.id,
      mvdetail: [],

      mvlist: [],
      mvdlist: [],
      seatlist: [],
      showlist: [],
    };
  },
  computed: { ...mapState(["cityId"]) },
  components: {CinemaDetailMovietime, CinemaDetailMovielist,CinemaDetailCinemaname,
CinemaDetailHead
   },
  mounted() {
     
    this.onLoad();
  
  },
  methods: {
    onLoad() {
      // 异步更新数据
      GETMVAPI({ cinemaId: this.mid }).then((res) => {
        this.mvdetail = res.data.data;
      });
      GETMVLISTAPI({ cinemaId: this.mid, ci: this.cityId, channelId: 4 }).then(
        (res1) => {
          this.mvlist = res1.data.data;
        }
      );
      GETMVDLISTAPI().then((res2) => {
        this.mvdlist = res2.data.data.dealList[0];
      });
      GETMVSEATLISTAPI().then((res3) => {
        this.seatlist = res3.data.data;
      });
      GETMVSHOWLISTAPI({ movieId: 1446115, cityId: this.cityId }).then(
        (res4) => {
          this.showlist = res4.data;
        }
      );
    },
  },
};
</script>
<style scoped lang="less">
.border1{
  width: 88px;
  height: 38px;
  border-radius: 3px;
  border:1px solid #ea8158 ;
  background-color: #c7c4c3;
  color: #ea8158;
  h3{
    line-height: 20px;
line-height: 20px;
text-align: center;
font-weight: 700;
font-size: 14px;
    
    font-weight: 700;

  }
  p{
line-height: 18px;
line-height: 18px;
text-align: center;
font-size: 12px;

  }
}
.border2{
  width: 88px;
  height: 38px;
  border-radius: 3px;
  border:1px solid #db5e94 ;
  background-color: #c5bbc0;
  color: #db5e94;
   h3{
    line-height: 20px;
line-height: 20px;
text-align: center;
font-weight: 700;
font-size: 14px;
    
    font-weight: 700;

  }
  p{
line-height: 18px;
line-height: 18px;
text-align: center;
font-size: 12px;

  }
}
.border3{
  width: 88px;
  height: 38px;
  border-radius: 3px;
  border:1px solid #f19e38 ;
  background-color:#d1cfcc;
  color: #f19e38;
   h3{
    line-height: 20px;
line-height: 20px;
text-align: center;
font-weight: 700;
font-size: 14px;
    
    font-weight: 700;

  }
  p{
line-height: 18px;
line-height: 18px;
text-align: center;
font-size: 12px;

  }
}
.border4{
  width: 88px;
  height: 38px;
  border-radius: 3px;
  border:1px solid #5cbaae ;
  background-color: #b9bdbc;
  color: #5cbaae;
   h3{
    line-height: 20px;
line-height: 20px;
text-align: center;
font-weight: 700;
font-size: 14px;
    
    font-weight: 700;

  }
  p{
line-height: 18px;
line-height: 18px;
text-align: center;
font-size: 12px;

  }
}
.border5{
  width: 88px;
  height: 38px;
  border-radius: 3px;
  border:1px solid #d5d5d5 ;
  background-color:#ffffff;
  color: #8a8a8a;
   h3{
    line-height: 20px;
line-height: 20px;
text-align: center;
font-weight: 700;
font-size: 14px;
    
    font-weight: 700;

  }
  p{
line-height: 18px;
line-height: 18px;
text-align: center;
font-size: 12px;

  }
}







.start {
  
  width: 100%;
  overflow: hidden;
 background-color: #212430;
  .box{
 padding:12px 0 12px 2px ;
 .four{}
 .two{
   background-image: linear-gradient(#212430, #999)}
  }
  .one {
    &:before {
        content: "";
        width: 1px;
        height: 45%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left:89%;
        z-index: 333;
        background: #ccc;
    }
}
}


</style>